<template>
  <el-scrollbar class="nav">
    <div style="width: 100%; height: 50px;"></div>
    <div class="nav-item" 
      v-for="item, index in nav" 
      :key="index"
    >
      <div class="nav-item-title">{{item.name}}</div>
      <div 
        class="nav-item-comp"
        :class="[checkedComp===itemChild.path?'checked-comp':'']"
        v-for="itemChild, indexChild in item.children"
        :key="indexChild"
      >
        <span style="cursor: pointer;" @click="changeComp(itemChild)">{{itemChild.name}}</span>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import nav from '@/router/left-side-nav.config.json'
export default {
  components: {

  },
  name: 'left-side-nav',
  data() {
    return {
      nav,
      checkedComp: '',
    }
  },
  computed: {

  },
  created() {
    console.log('nav', nav)
  },
  methods: {
    changeComp(row) {
      this.checkedComp = row.path
      this.$router.push({ path: row.path })
    },
  }
}
</script>

<style scoped lang="scss">
  .nav {
    &-item {
      width: 100%;

      &-comp {
        width: 100%;
        height: 40px;
        text-align: left;
        transition: all .2s ease;
        line-height: 40px;
      }

      .checked-comp {
        color: #409eff;
      }

      &-title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
</style>
